---
title: Actionsheet | gluestack-ui | Installation, Usage, and API

description: Quickly access options overlaying the app's content for efficient user actions.

pageTitle: Actionsheet

pageDescription: Quickly access options overlaying the app's content for efficient user actions.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Disclosure/Actionsheet" />

import {
  Actionsheet,
  ActionsheetBackdrop,
  ActionsheetContent,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetItem,
  ActionsheetItemText,
  ActionsheetIcon,
  ActionsheetScrollView,
  ActionsheetVirtualizedList,
  ActionsheetFlatList,
  ActionsheetSectionList,
  ActionsheetSectionHeaderText,
  ButtonGroup,
  Button,
  ButtonText,
  VStack,
  Input,
  InputIcon,
  InputSlot,
  InputField,
  FormControl,
  FormControlLabel,
  FormControlLabelText,
  FormControlHelper,
  FormControlHelperText,
  HStack,
  Image,
  Text,
  Heading,
  Box,
  Icon,
  TrashIcon,
  EyeOffIcon,
  ClockIcon,
  DownloadIcon,
  EditIcon,
  CloseIcon,
  Pressable
} from '../../core-components/nativewind';
import {
  CollapsibleCode,
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
  Tabs
} from '@gluestack/design-system';
import { Platform, KeyboardAvoidingView, } from 'react-native';
import { CreditCardIcon, UploadCloud, Send, Percent, DollarSign } from 'lucide-react-native';
import { transformedCode } from '../../utils';
import Wrapper from '../../core-components/nativewind/Wrapper';

This is an illustration of **Actionsheet** component.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      function App(){
        const [showActionsheet, setShowActionsheet] = React.useState(false);
        const handleClose = () => setShowActionsheet(false);
          return (
            <>
              <Button onPress={() => setShowActionsheet(true)}>
                <ButtonText>Open Actionsheet</ButtonText>
              </Button>
              <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                <ActionsheetBackdrop />
                <ActionsheetContent>
                  <ActionsheetDragIndicatorWrapper>
                    <ActionsheetDragIndicator />
                  </ActionsheetDragIndicatorWrapper>
                  <ActionsheetItem onPress={handleClose}>
                    <ActionsheetItemText>Edit Message</ActionsheetItemText>
                  </ActionsheetItem>
                  <ActionsheetItem onPress={handleClose}>
                    <ActionsheetItemText>Mark Unread</ActionsheetItemText>
                  </ActionsheetItem>
                  <ActionsheetItem onPress={handleClose}>
                    <ActionsheetItemText>Remind Me</ActionsheetItemText>
                  </ActionsheetItem>
                  <ActionsheetItem onPress={handleClose}>
                    <ActionsheetItemText>Add to Saved Items</ActionsheetItemText>
                  </ActionsheetItem>
                  <ActionsheetItem isDisabled onPress={handleClose}>
                    <ActionsheetItemText>Delete</ActionsheetItemText>
                  </ActionsheetItem>
                </ActionsheetContent>
              </Actionsheet>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Button,
        ButtonText,
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        Wrapper,
      },
    }}
  />
</Wrapper>

<br />

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add actionsheet
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/actionsheet
```
### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/actionsheet/index.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import {
  Actionsheet,
  ActionsheetBackdrop,
  ActionsheetContent,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetItem,
  ActionsheetItemText,
  ActionsheetIcon,
} from '@/components/ui/actionsheet';
```

```jsx
export default () => (
  <Actionsheet>
    <ActionsheetBackdrop />
    <ActionsheetContent>
      <ActionsheetDragIndicatorWrapper>
        <ActionsheetDragIndicator />
      </ActionsheetDragIndicatorWrapper>
      <ActionsheetItem>
        <ActionsheetItemText />
      </ActionsheetItem>
    </ActionsheetContent>
  </Actionsheet>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Actionsheet

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.


<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the Actionsheet will open. Useful for controllable state behavior.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`() => any`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              {`Callback invoked when the Actionsheet is closed.`}
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`() => any`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              {`Callback invoked when the Actionsheet is opened.`}
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>useRNModal</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, renders react-native native modal.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultIsOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Specifies the default open state of the Actionsheet`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>initialFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the Actionsheet opens.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>finalFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the Actionsheet closes`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeOnOverlayClick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the Actionsheet will close when the overlay is clicked.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isKeyboardDismissable</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the keyboard can dismiss the Actionsheet`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>trapFocus</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`true`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, creates a focus scope containing all elements within the Actionsheet content.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>children</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>any</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The content to display inside the Actionsheet`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>snapPoints</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Array<number>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`[50]`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              {`The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future.`}
            </Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### ActionsheetBackdrop

It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.

#### ActionsheetContent

It inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.

#### ActionsheetDragIndicatorWrapper

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### ActionsheetDragIndicator

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### ActionsheetItem

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.

#### ActionsheetItemText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### ActionsheetIcon

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### ActionsheetScrollView

It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component.

#### ActionsheetVirtualizedList

It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component.

#### ActionsheetFlatList

It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component.

#### ActionsheetSectionList

It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component.

#### ActionsheetSectionHeaderText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

> Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items.

### Features

- Actionsheet has aria-modal set to true.
- Actionsheet has role set to dialog.
- When the Actionsheet opens, focus is trapped within it.
- Pressing Esc closes the Actionsheet
- Clicking on the overlay closes the Actionsheet
- Scrolling is blocked on the elements behind the Actionsheet

### Accessibility

We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

#### Keyboard

- `Tab + Enter`: Triggers the actionsheet action.

### Screen Reader

- VoiceOver: When the ActionSheet is focused, the screen reader will announce the button name. After entering the ActionSheet, it will read the content of the ActionSheet items.

#### Keyboard

- `Space`: Opens the actionsheet.
- `Enter`: Opens/closes the actionsheet.
- `Tab`: Moves focus to the next focusable element.
- `Shift + Tab`: Moves focus to the previous focusable element.
- `Esc`: Closes the actionsheet.

## Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

### Keyboard handling

Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.

**Without SnapPoints**

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          const [showActionsheet, setShowActionsheet] = React.useState(false);
          const handleClose = () => setShowActionsheet(false);
            return (
              <>
                <Button onPress={() => setShowActionsheet(true)}>
                  <ButtonText>Open</ButtonText>
                </Button>
                <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
                  <Actionsheet
                    isOpen={showActionsheet}
                    onClose={handleClose}
                  >
                    <ActionsheetBackdrop />
                    <ActionsheetContent className="">
                      <ActionsheetDragIndicatorWrapper>
                        <ActionsheetDragIndicator />
                      </ActionsheetDragIndicatorWrapper>
                      <VStack className="w-full pt-5">
                        <HStack space="md" className="justify-center items-center">
                          <Box
                            className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded-sm"
                          >
                            <Image
                              source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
                              resizeMode="contain"
                              className="flex-1"
                            />
                          </Box>
                          <VStack className="flex-1">
                            <Text className="font-bold">Mastercard</Text>
                            <Text>Card ending in 2345</Text>
                          </VStack>
                        </HStack>
                        <FormControl className="mt-[36px]">
                          <FormControlLabel>
                            <FormControlLabelText>
                              Confirm security code
                            </FormControlLabelText>
                          </FormControlLabel>
                          <Input className="w-full">
                            <InputSlot>
                            <InputIcon as={CreditCardIcon} className="ml-2"/>
                            </InputSlot>
                            <InputField placeholder="CVC/CVV" />
                          </Input>
                          <Button onPress={handleClose} className="mt-3">
                            <ButtonText className="flex-1">Pay $1000</ButtonText>
                          </Button>
                        </FormControl>
                      </VStack>
                    </ActionsheetContent>
                  </Actionsheet>
              </KeyboardAvoidingView>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Wrapper,
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        Button,
        ButtonText,
        VStack,
        Input,
        InputIcon,
        InputSlot,
        InputField,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        HStack,
        Image,
        Text,
        Box,
        Icon,
        KeyboardAvoidingView,
        Platform,
        CreditCardIcon,
      },
      argsType: {},
    }}
  />
</Wrapper>

**With SnapPoints**

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          const [showActionsheet, setShowActionsheet] = React.useState(false);
          const handleClose = () => setShowActionsheet(false);
            return (
              <>
                <Button onPress={() => setShowActionsheet(true)}>
                    <ButtonText>Open</ButtonText>
                </Button>
                <Actionsheet
                  isOpen={showActionsheet}
                  onClose={handleClose}
                  snapPoints={[36]}
                >
                  <KeyboardAvoidingView
                    behavior="position"
                    style={{
                      position: 'relative',
                      flex: 1,
                      justifyContent: 'flex-end',
                    }}
                  >
                  <ActionsheetBackdrop />
                  <ActionsheetContent className="">
                    <ActionsheetDragIndicatorWrapper>
                      <ActionsheetDragIndicator />
                    </ActionsheetDragIndicatorWrapper>
                    <VStack className="w-full pt-5">
                      <HStack space="md" className="justify-center items-center">
                        <Box
                          className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded-sm"
                        >
                          <Image
                            source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
                            resizeMode="contain"
                            className="flex-1"
                          />
                        </Box>
                        <VStack className="flex-1">
                          <Text className="font-bold">Mastercard</Text>
                          <Text>Card ending in 2345</Text>
                        </VStack>
                      </HStack>
                      <FormControl className="mt-9">
                        <FormControlLabel>
                          <FormControlLabelText>
                            Confirm security code
                          </FormControlLabelText>
                        </FormControlLabel>
                        <Input className="w-full">
                          <InputSlot>
                          <InputIcon as={CreditCardIcon} className="ml-2"/>
                          </InputSlot>
                          <InputField placeholder="CVC/CVV" />
                        </Input>
                        <Button onPress={handleClose} className="mt-3">
                          <ButtonText className="flex-1">Pay $1000</ButtonText>
                        </Button>
                      </FormControl>
                    </VStack>
                  </ActionsheetContent>
                </KeyboardAvoidingView>
              </Actionsheet>
            </>
          )
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Wrapper,
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        Button,
        ButtonText,
        VStack,
        Input,
        InputIcon, 
        InputSlot,
        InputField,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        HStack,
        Image,
        Text,
        Box,
        Icon,
        CreditCardIcon,
        KeyboardAvoidingView,
        Platform,
      },
      argsType: {},
    }}
  />
</Wrapper>

### Icons

The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          const [showActionsheet, setShowActionsheet] = React.useState(false);
          const handleClose = () => setShowActionsheet(false);
            return (
              <>
                <Button onPress={() => setShowActionsheet(true)}>
                  <ButtonText>Open</ButtonText>
                </Button>
                <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                  <ActionsheetBackdrop />
                  <ActionsheetContent>
                    <ActionsheetDragIndicatorWrapper>
                      <ActionsheetDragIndicator />
                    </ActionsheetDragIndicatorWrapper>
                    <ActionsheetItem onPress={handleClose}>
                      <ActionsheetIcon className="stroke-background-700" as={EditIcon} />
                      <ActionsheetItemText>Edit Message</ActionsheetItemText>
                    </ActionsheetItem>
                    <ActionsheetItem onPress={handleClose}>
                      <ActionsheetIcon className="stroke-background-700" as={EyeOffIcon} />
                      <ActionsheetItemText>Mark Unread</ActionsheetItemText>
                    </ActionsheetItem>
                    <ActionsheetItem onPress={handleClose}>
                      <ActionsheetIcon className="stroke-background-700" as={ClockIcon} />
                      <ActionsheetItemText>Remind Me</ActionsheetItemText>
                    </ActionsheetItem>
                    <ActionsheetItem onPress={handleClose}>
                      <ActionsheetIcon className="stroke-background-700" as={DownloadIcon} />
                      <ActionsheetItemText>Add to Saved Items</ActionsheetItemText>
                    </ActionsheetItem>
                    <ActionsheetItem isDisabled onPress={handleClose}>
                      <ActionsheetIcon className="stroke-background-700" as={TrashIcon} />
                      <ActionsheetItemText>Delete</ActionsheetItemText>
                    </ActionsheetItem>
                  </ActionsheetContent>
                </Actionsheet>
              </>
            );
          }
        `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        ActionsheetIcon,
        Wrapper,
        TrashIcon,
        EyeOffIcon,
        ClockIcon,
        DownloadIcon,
        EditIcon,
        Button,
        ButtonText,
      },
      argsType: {},
    }}
  />
</Wrapper>

### VirtualizedList

The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `function App(){
    const [showActionsheet, setShowActionsheet] = React.useState(false);
    const handleClose = () => setShowActionsheet(false);
    const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]);
    const getItem = (_data, index) => ({
      id: Math.random().toString(12).substring(0),
      title: _data[index],
    });
    const getItemCount = (_data) => _data.length;
    const Item = React.useCallback(
      ({ title }) => (
        <ActionsheetItem onPress={handleClose}>
          <ActionsheetItemText>{title}</ActionsheetItemText>
        </ActionsheetItem>
      ),
      [handleClose]
    );
    return (
    <>
        <Button onPress={() => setShowActionsheet(true)}>
          <ButtonText>Open</ButtonText>
        </Button>
        <Actionsheet isOpen={showActionsheet} onClose={handleClose}  snapPoints={[50]}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetVirtualizedList
            h="$56"
            data={data}
            initialNumToRender={5}
            renderItem={({ item }) => <Item title={item.title} />}
            keyExtractor={(item) => item.id}
            getItemCount={getItemCount}
            getItem={getItem}
          />
        </ActionsheetContent>
      </Actionsheet>
    </>
);
}
`,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        ActionsheetVirtualizedList,
        Button,
        ButtonText,
        Wrapper,
      },
      argsType: {},
    }}
  />
</Wrapper>

### FlatList

The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `function App(){
    const [showActionsheet, setShowActionsheet] = React.useState(false);
    const handleClose = () => setShowActionsheet(false);
    const DATA = [
      {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item'
      },
      {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item'
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item'
      },
    ];
    const Item = React.useCallback(
      ({ title }) => (
        <ActionsheetItem onPress={handleClose}>
          <ActionsheetItemText>{title}</ActionsheetItemText>
        </ActionsheetItem>
      ),
      [handleClose]
    );
    return (
    <>
        <Button onPress={() => setShowActionsheet(true)}>
          <ButtonText>Open</ButtonText>
        </Button>
        <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetFlatList
            data={DATA}
            renderItem={({ item }) => <Item title={item.title} />}
            keyExtractor={(item) => item.id}
          />
        </ActionsheetContent>
      </Actionsheet>
    </>
);
}
`,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        ActionsheetFlatList,
        Button,
        ButtonText,
        Wrapper,
      },
      argsType: {},
    }}
  />
</Wrapper>

### SectionList

The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `function App(){
    const [showActionsheet, setShowActionsheet] = React.useState(false);
    const handleClose = () => setShowActionsheet(false);
    const DATA = [
      {
        title: 'Gender',
        data: ['Men', 'Women', 'Boy', 'Girl'],
      },
    ];
    return (
    <>
        <Button onPress={() => setShowActionsheet(true)}>
          <ButtonText>Open</ButtonText>
        </Button>
        <Actionsheet isOpen={showActionsheet} onClose={handleClose} snapPoints={[35]}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
           <ActionsheetSectionList
            h="$56"
            sections={DATA}
            keyExtractor={(item, index) => item + index}
            renderItem={({ item }) => (
              <ActionsheetItem onPress={handleClose}>
                <ActionsheetItemText>{item}</ActionsheetItemText>
              </ActionsheetItem>
            )}
            renderSectionHeader={({ section: { title, data } }) => (
              <ActionsheetSectionHeaderText>
                {title}  ({data.length})
              </ActionsheetSectionHeaderText>
            )}
          />
        </ActionsheetContent>
      </Actionsheet>
    </>
);
}
`,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        ActionsheetSectionList,
        ActionsheetSectionHeaderText,
        Button,
        ButtonText,
        Wrapper,
      },
      argsType: {},
    }}
  />
</Wrapper>

### File Upload with Actionsheet

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          const [showActionsheet, setShowActionsheet] = React.useState(false);
          const handleClose = () => setShowActionsheet(false);
          return (
            <>
              <Button onPress={() => setShowActionsheet(true)}>
                <ButtonText>Open</ButtonText>
              </Button>
              <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                <ActionsheetBackdrop />
                <ActionsheetContent className="px-5">
                  <ActionsheetDragIndicatorWrapper>
                    <ActionsheetDragIndicator />
                  </ActionsheetDragIndicatorWrapper>
                  <HStack className="justify-between w-full mt-3">
                    <VStack>
                      <Heading size="md" className="font-semibold">
                        Upload your latest resume
                      </Heading>
                      <Text size="sm">JPG, PDF, PNG supported</Text>
                    </VStack>
                    <Pressable onPress={handleClose}>
                      <Icon as={CloseIcon} size="lg" className="stroke-background-500" />
                    </Pressable>
                  </HStack>
                  <Box className="my-[18px] items-center justify-center rounded-xl bg-background-50 border border-dashed border-outline-300 h-[130px] w-full">
                    <Icon
                      as={UploadCloud}
                      className="h-[62px] w-[62px] stroke-background-200"
                    />
                    <Text size="sm">No files uploaded yet</Text>
                  </Box>
                  <ButtonGroup className="w-full">
                    <Button className="w-full" onPress={handleClose}>
                      <ButtonText>Browse files</ButtonText>
                    </Button>
                    <Button
                      className="w-full"
                      variant="outline"
                      isDisabled
                      action="secondary"
                    >
                      <ButtonText>Upload</ButtonText>
                    </Button>
                  </ButtonGroup>
                </ActionsheetContent>
              </Actionsheet>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetItemText,
        ActionsheetSectionList,
        ActionsheetSectionHeaderText,
        ButtonGroup,
        Button,
        ButtonText,
        Wrapper,
        HStack,
        VStack,
        Box,
        Heading,
        Text,
        Icon,
        CloseIcon,
        UploadCloud,
        Pressable
      },
      argsType: {},
    }}
  />
</Wrapper>

{/* ### Actionsheet with CTA

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          const [showActionsheet, setShowActionsheet] = React.useState(false);
          const handleClose = () => setShowActionsheet(false);
          return (
            <>
              <Button onPress={() => setShowActionsheet(true)}>
                <ButtonText>Open</ButtonText>
              </Button>
              <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                <ActionsheetBackdrop />
                <ActionsheetContent className="px-5">
                  <ActionsheetDragIndicatorWrapper>
                    <ActionsheetDragIndicator />
                  </ActionsheetDragIndicatorWrapper>
                  <HStack className="justify-between w-full gap-2 mt-3">
                    <Text
                      size="xl"
                      className="font-semibold text-typography-900 flex-1"
                    >
                      See what all new features are available in this updated
                    </Text>
                    <Pressable onPress={handleClose}>
                      <Icon as={CloseIcon} size="lg" className="stroke-background-500" />
                    </Pressable>
                  </HStack>
                  <VStack className="my-5 gap-3 w-full">
                    <ActionsheetItem className="gap-3 w-full" onPress={handleClose}>
                      <Box className="bg-success-700 rounded-full items-center justify-center w-8 h-8">
                        <ActionsheetIcon size="sm" as={Send} className="stroke-typography-0" />
                      </Box>
                      <VStack className="flex-1">
                        <Text className="text-typography-950">
                          Simplified navigation
                        </Text>
                        <ActionsheetItemText size="sm">
                          Usage of app was never that easy: all important things at your
                          fingertips
                        </ActionsheetItemText>
                      </VStack>
                    </ActionsheetItem>
                    <ActionsheetItem className="gap-3" onPress={handleClose}>
                      <Box className="w-8 h-8 bg-success-700 rounded-full items-center justify-center">
                        <ActionsheetIcon
                          size="sm"
                          as={Percent}
                          className="stroke-typography-0"
                        />
                      </Box>
                      <VStack className="flex-1">
                        <Text className="text-typography-950">Special offer</Text>
                        <ActionsheetItemText size="sm">
                          Get new offers and discounts every week right in the app
                        </ActionsheetItemText>
                      </VStack>
                    </ActionsheetItem>
                    <ActionsheetItem className="gap-3" onPress={handleClose}>
                      <Box className="w-8 h-8 bg-success-700 rounded-full items-center justify-center">
                        <ActionsheetIcon
                          size="sm"
                          as={DollarSign}
                          className="stroke-typography-0"
                        />
                      </Box>
                      <VStack className="flex-1">
                        <Text className="text-typography-950">New cashback</Text>
                        <ActionsheetItemText size="sm">
                          Get daily cashback from every purchase you make and even more
                          when you shop at our partners
                        </ActionsheetItemText>
                      </VStack>
                    </ActionsheetItem>
                  </VStack>
                  <Button className="w-full" size="lg" onPress={handleClose}>
                    <ButtonText>Explore all</ButtonText>
                  </Button>
                </ActionsheetContent>
              </Actionsheet>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Actionsheet,
        ActionsheetBackdrop,
        ActionsheetContent,
        ActionsheetDragIndicator,
        ActionsheetDragIndicatorWrapper,
        ActionsheetItem,
        ActionsheetIcon,
        ActionsheetItemText,
        ActionsheetSectionList,
        ActionsheetSectionHeaderText,
        Button,
        ButtonText,
        Wrapper,
        HStack,
        VStack,
        Box,
        Text,
        Icon,
        CloseIcon,
        Send,
        Percent,
        DollarSign,
        Pressable
      },
      argsType: {},
    }}
  />
</Wrapper> */}